<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
  <div class="flex-1 p-6">
    <!-- 面包屑导航 -->
    <div class="flex justify-between items-center mb-6">
      <div class="flex items-center text-sm text-gray-500">
        <span>订单服务</span>
        <el-icon class="mx-1"><ArrowRight /></el-icon>
        <span class="text-blue-600">商城</span>
      </div>
      <div class="flex items-center">
        <div class="relative mr-4 cursor-pointer" @click="showCart = true">
          <el-icon class="text-2xl text-gray-700"><ShoppingCart /></el-icon>
          <div
            v-if="cartCount > 0"
            class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center"
          >
            {{ cartCount }}
          </div>
        </div>
        <div class="flex items-center text-sm text-gray-700">
          <el-icon><User /></el-icon>
          <span class="ml-2">李明智</span>
        </div>
      </div>
    </div>
    <!-- 搜索和筛选区域 -->
    <div class="bg-white p-4 rounded-lg shadow-sm mb-6">
      <div class="flex items-center justify-between">
        <div class="relative flex-1 max-w-xl">
          <input
          
            type="text"
            v-model="searchQuery"
            placeholder="搜索商品名称、描述或关键词"
            style="margin-top: 20px;"
            class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
          />
          <el-icon style="bottom: 19px;" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
            ><Search
          /></el-icon>
        </div>
        <div class="flex items-center ml-4">
          <button
            @click="showFilters = !showFilters"
            class="flex items-center px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm cursor-pointer whitespace-nowrap !rounded-button"
          >
            <el-icon class="mr-1"><Filter /></el-icon>
            高级筛选
          </button>
        </div>
      </div>
      <!-- 高级筛选区域 -->
      <div v-if="showFilters" class="mt-4 pt-4 border-t border-gray-100">
        <div class="flex flex-wrap gap-4">
          <div class="w-64">
            <div class="text-sm text-gray-600 mb-1">价格区间</div>
            <div class="flex items-center">
              <input
                type="number"
                v-model="priceRange.min"
                placeholder="最低价"
                class="w-24 px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
              />
              <span class="mx-2 text-gray-400">-</span>
              <input
                type="number"
                v-model="priceRange.max"
                placeholder="最高价"
                class="w-24 px-3 py-1 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-blue-500"
              />
            </div>
          </div>
          <div class="w-64">
            <div class="text-sm text-gray-600 mb-1">评分</div>
            <el-select v-model="ratingFilter" placeholder="选择评分" class="w-full">
              <el-option label="全部评分" value=""></el-option>
              <el-option label="4星及以上" value="4"></el-option>
              <el-option label="3星及以上" value="3"></el-option>
              <el-option label="2星及以上" value="2"></el-option>
            </el-select>
          </div>
          <div class="w-64">
            <div class="text-sm text-gray-600 mb-1">排序方式</div>
            <el-select v-model="sortBy" placeholder="排序方式" class="w-full">
              <el-option label="默认排序" value="default"></el-option>
              <el-option label="价格从低到高" value="price-asc"></el-option>
              <el-option label="价格从高到低" value="price-desc"></el-option>
              <el-option label="评分从高到低" value="rating-desc"></el-option>
              <el-option label="销量从高到低" value="sales-desc"></el-option>
              <el-option label="最新上架" value="newest"></el-option>
            </el-select>
          </div>
        </div>
        <div class="flex justify-end mt-4">
          <button
            @click="resetFilters"
            class="px-4 py-1 text-gray-600 hover:text-gray-800 text-sm cursor-pointer whitespace-nowrap !rounded-button"
          >
            重置
          </button>
          <button
            @click="applyFilters"
            class="ml-2 px-4 py-1 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm cursor-pointer whitespace-nowrap !rounded-button"
          >
            应用筛选
          </button>
        </div>
      </div>
    </div>
    <!-- 分类标签栏 -->
    <div class="bg-white p-4 rounded-lg shadow-sm mb-6">
      <div class="flex items-center space-x-4 overflow-x-auto pb-1">
        <button
          v-for="category in categories"
          :key="category.id"
          @click="activeCategory = category.id"
          :class="[
            'px-4 py-2 rounded-md text-sm font-medium cursor-pointer whitespace-nowrap !rounded-button',
            activeCategory === category.id
              ? 'bg-blue-600 text-white'
              : 'text-gray-700 hover:bg-gray-100',
          ]"
        >
          {{ category.name }}
        </button>
      </div>
    </div>
    <!-- 商品展示区域 -->
    <div class="mb-6">
      <div
        v-if="filteredProducts.length > 0"
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
      >
        <div
          v-for="product in commoditys"
          :key="product.id"
          class="bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300 cursor-pointer"
        >
          <div class="relative h-48 overflow-hidden">
            <a href="#popup" >
              <img
                @click="handleRefreshCurrent(product)"
              href="#popup"
              src="https://images.unsplash.com/photo-1689443111130-6e9c7dfd8f9e?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTE4fHxjb21wdXRlciUyMHNjaWVuY2UlMjBhaXxlbnwwfHwwfHx8MA%3D%3D"
              :alt="product.name"
              class="w-full h-full object-cover object-top transition-transform duration-300 hover:scale-105"
            />

            </a>

            <div
              v-if="product.discount"
              class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-md"
            >
              {{ product.discount / 10}}折
            </div>
          </div>



          <div class="p-4">
            <h3 class="text-lg font-medium text-gray-800 mb-2 line-clamp-2">{{ product.name }} {{product.totalCoins != null ? "一次获得 " + product.totalCoins + " 积分 " : ""}}</h3>
            <div class="flex items-center mb-2">
              <div class="flex items-center">
                <el-icon class="text-yellow-400"><Star /></el-icon>
                <span class="ml-1 text-sm text-gray-700">{{ 5.0 }}</span>
              </div>
              <span class="mx-2 text-gray-300">|</span>
              <span class="text-sm text-gray-500">已售 {{ product.sales }}</span>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-end">
                <span class="text-xl font-bold text-red-500">¥{{ product.currentPrice.toFixed(2) }}</span>
                <span v-if="product.originalPrice" class="ml-2 text-sm text-gray-400 line-through"
                  >¥{{ product.originalPrice.toFixed(2) }}</span
                >
              </div>
              <button
                @click.stop="addToCart(product)"
                class="p-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 cursor-pointer !rounded-button"
              >
                <el-icon><Plus /></el-icon>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="bg-white rounded-lg shadow-sm p-10 text-center">
        <el-icon class="text-5xl text-gray-300 mb-4"><ShoppingBag /></el-icon>
        <p class="text-gray-500">暂无符合条件的商品</p>
      </div>
    </div>
    <!-- 加载更多 -->
    <div v-if="filteredProducts.length > 0" class="text-center mb-6">
      <button
        @click="loadMore"
        class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 cursor-pointer whitespace-nowrap !rounded-button"
      >
        加载更多
      </button>
    </div>
    <!-- 购物车抽屉 -->
    <el-drawer v-model="showCart" title="购物车" size="30%">
      <div v-if="cart.length > 0" class="px-4">
        <div
          v-for="(item, index) in cart"
          :key="index"
          class="flex items-center py-4 border-b border-gray-100"
        >
          <img
            src="https://images.unsplash.com/photo-1689443111130-6e9c7dfd8f9e?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTE4fHxjb21wdXRlciUyMHNjaWVuY2UlMjBhaXxlbnwwfHwwfHx8MA%3D%3D"
            class="w-16 h-16 object-cover object-top rounded-md"
          />
          <div class="ml-4 flex-1">
            <h4 class="text-sm font-medium text-gray-800 line-clamp-1">{{ item.name }}</h4>
            <div class="flex items-center justify-between mt-2">
              <span class="text-red-500 font-medium">¥{{ item.currentPrice?.toFixed(2) }}</span>
              <div class="flex items-center">
                <button
                  @click="decreaseQuantity(index)"
                  class="w-6 h-6 flex items-center justify-center border border-gray-300 rounded-l-md cursor-pointer !rounded-button"
                >
                  <el-icon><Minus /></el-icon>
                </button>
                <span
                  class="w-8 h-6 flex items-center justify-center border-t border-b border-gray-300 text-sm"
                  >{{ item.quantity }}</span
                >
                <button
                  @click="increaseQuantity(index)"
                  class="w-6 h-6 flex items-center justify-center border border-gray-300 rounded-r-md cursor-pointer !rounded-button"
                >
                  <el-icon><Plus /></el-icon>
                </button>
              </div>
            </div>
          </div>
          <button
            @click="removeFromCart(index)"
            class="ml-2 text-gray-400 hover:text-red-500 cursor-pointer"
          >
            <el-icon><Delete /></el-icon>
          </button>
        </div>
        <div class="mt-4 py-4 border-t border-gray-100">
          <div class="flex justify-between items-center mb-4">
            <span class="text-gray-700">总计 ({{ cartCount }} 件商品):</span>
            <span class="text-xl font-bold text-red-500">¥{{ cartTotal.toFixed(2) }}</span>
          </div>
          <button
            class="w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer whitespace-nowrap !rounded-button"
            @click="handleCheckout"
          >
            结算
          </button>
        </div>
      </div>
      <div v-else class="flex flex-col items-center justify-center h-full text-gray-500">
        <el-icon class="text-5xl mb-4"><ShoppingCart /></el-icon>
        <p>购物车是空的</p>
        <button
          @click="showCart = false"
          class="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 cursor-pointer whitespace-nowrap !rounded-button"
        >
          去购物
        </button>
      </div>
    </el-drawer>
  </div>

  <div class="popup" id="popup">
    <div class="popup__content">
      <div class="popup__left">
        <img src="@/assets/nat-8.jpg" alt="Tour photo" class="popup__img">
        <img src="@/assets/nat-9.jpg" alt="Tour photo" class="popup__img">
      </div>
      <div class="popup__right">
        <a href="#section-tours" class="popup__close">&times;</a>
        <h2 class="heading-secondary u-margin-bottom-small">{{ currentCommdity.name }} {{currentCommdity.totalCoins != null ? "一次获得 " + currentCommdity.totalCoins + " 积分 " : '每日领取'+ currentCommdity.dailyCoins + '积分'}}</h2>
        <h3 class="heading-tertiary u-margin-bottom-small">原价 {{currentCommdity.originalPrice}} ￥ &emsp13;&emsp13; &emsp13;&emsp13;
          现价{{currentCommdity.currentPrice}} ￥</h3>
        <p class="popup__text">
          {{
            currentCommdity.aiDraw != 0 ? "包含 " + currentCommdity.aiDraw + " 次免费使用Ai绘画 + " +
              currentCommdity.aiVideo + "次免费使用Ai视频福利" : ""
          }}
        </p>
        <a href="#" class="btn btn--green">立刻购买</a>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import {
  User,
  Lock,
  Setting,
  ChatDotRound,
  Picture,
  VideoPlay,
  Medal,
  Ticket,
  ShoppingCart,
  Document,
  Collection,
  Upload,
  Search,
  Filter,
  Star,
  Plus,
  Minus,
  Delete,
  ArrowRight,
  ShoppingBag,
} from '@element-plus/icons-vue'

import router from '@/router';
import {postModifyCartService,getCartListService} from '../api/cart'
// 分类数据
const categories = [
  { id: 'all', name: '全部' },
  { id: 'chat', name: 'AI 对话' },
  { id: 'image', name: 'AI 绘图' },
  { id: 'video', name: 'AI 视频' },
  { id: 'audio', name: 'AI 音频' },
  { id: 'points', name: '积分套餐' },
  { id: 'vip', name: '会员服务' },
]

import { useRouter1 } from '../utils/useRoute'
const {
  goToHome,
  goToDocumentUpload,
  goToKnowledgeBaseManagement,
  goToMemberCenter,
  goToNotificationSettings,
  goToOrder,
  goToPointsManagement,
  goToSecuritySettings,
  goToUser,
  goToAiChat,
  goToAiDrawing,
  goToProduct,
} = useRouter1()
import {getCommodityList, Product} from '@/api/vip.ts'

const commoditys = ref<Product>([]);
const currentCommdity = ref<Product>({});

const handleRefreshCurrent = (item) => {
  currentCommdity.value = item;
}
// 商品数据
const products = ref([
  {
    id: 1,
    name: 'AI 对话高级套餐 - 无限对话次数',
    description: '享受无限制的AI对话服务，适合需要频繁使用AI助手的用户',
    price: 199.0,
    originalPrice: 299.0,
    discount: 6.7,
    rating: 4.9,
    sales: 2568,
    currentPrice:9.9,
    category: 'chat',
    image:
      'https://readdy.ai/api/search-image?query=A%20professional%20and%20modern%20AI%20chat%20interface%20displayed%20on%20a%20laptop%20screen%20with%20blue%20gradient%20background%2C%20showing%20conversation%20bubbles%20and%20an%20AI%20assistant%20icon%2C%20clean%20and%20minimalist%20design&width=400&height=300&seq=1&orientation=landscape',
  },
  {
    id: 2,
    name: 'AI 绘图创作包 - 500次高清作图',
    description: '提供500次高清AI绘图服务，支持多种风格和分辨率',
    price: 299.0,
    originalPrice: 399.0,
    discount: 7.5,
    rating: 4.8,
    currentPrice:49.98,
    sales: 1875,
    category: 'image',
    image:
      'https://readdy.ai/api/search-image?query=Digital%20art%20creation%20process%20with%20AI%2C%20showing%20a%20canvas%20transforming%20into%20a%20beautiful%20colorful%20landscape%20painting%2C%20with%20artistic%20tools%20and%20a%20blue%20gradient%20background%2C%20professional%20quality&width=400&height=300&seq=2&orientation=landscape',
  },
  {
    id: 3,
    name: 'AI 视频生成套餐 - 专业版',
    description: '每月可生成50个高质量AI视频，支持多种分辨率和风格',
    price: 499.0,
    originalPrice: 699.0,
    discount: 7.1,
    rating: 4.7,
    sales: 1245,
    currentPrice:299.99,
    category: 'video',
    image:
      'https://readdy.ai/api/search-image?query=Professional%20video%20editing%20interface%20with%20AI%20tools%2C%20showing%20timeline%2C%20preview%20screen%20and%20effect%20controls%2C%20with%20a%20blue%20gradient%20background%2C%20modern%20and%20sleek%20design&width=400&height=300&seq=3&orientation=landscape',
  },
  {
    id: 4,
    name: '10000积分充值包',
    description: '一次性充值10000积分，可用于平台内所有AI服务',
    price: 99.0,
    originalPrice: 129.0,
    discount: 7.7,
    rating: 5.0,
    sales: 3456,
    currentPrice:99.99,
    category: 'points',
    image:
      'https://readdy.ai/api/search-image?query=Digital%20wallet%20or%20credit%20card%20with%20glowing%20points%20or%20coins%2C%20representing%20digital%20currency%20or%20points%20system%2C%20with%20a%20blue%20gradient%20background%2C%20modern%20and%20minimalist%20design&width=400&height=300&seq=4&orientation=landscape',
  },
  {
    id: 5,
    name: 'AI 音频转写服务包 - 100小时',
    description: '提供100小时的AI音频转写服务，支持多种语言',
    price: 199.0,
    originalPrice: 249.0,
    discount: 8.0,
    rating: 4.6,
    currentPrice:599.99,
    sales: 987,
    category: 'audio',
    image:
      'https://readdy.ai/api/search-image?query=Audio%20waveform%20visualization%20with%20AI%20transcription%20text%20appearing%20beside%20it%2C%20professional%20sound%20studio%20equipment%2C%20with%20a%20blue%20gradient%20background%2C%20clean%20and%20modern%20interface&width=400&height=300&seq=5&orientation=landscape',
  },
  {
    id: 6,
    name: 'AI 全能年度会员',
    description: '包含所有AI服务的年度会员，无限使用次数',
    price: 1999.0,
    originalPrice: 2999.0,
    discount: 6.7,
    rating: 4.9,
    currentPrice:9.99,
    sales: 1568,
    category: 'vip',
    image:
      'https://readdy.ai/api/search-image?query=Premium%20VIP%20membership%20card%20or%20badge%20with%20golden%20elements%20and%20AI%20technology%20symbols%2C%20exclusive%20and%20luxurious%20design%2C%20with%20a%20blue%20gradient%20background%2C%20professional%20and%20elegant&width=400&height=300&seq=6&orientation=landscape',
  },
  {
    id: 7,
    name: 'AI 对话商业版 - 团队协作',
    description: '适合企业团队使用的AI对话服务，支持多人协作',
    price: 599.0,
    originalPrice: 799.0,
    discount: 7.5,
    rating: 4.7,
    sales: 876,
    currentPrice:9.99,
    category: 'chat',
    image:
      'https://readdy.ai/api/search-image?query=Business%20team%20collaborating%20with%20AI%20assistant%20in%20a%20modern%20office%20setting%2C%20multiple%20chat%20windows%20on%20large%20screens%2C%20professional%20environment%2C%20with%20a%20blue%20gradient%20background&width=400&height=300&seq=7&orientation=landscape',
  },
  {
    id: 8,
    name: 'AI 绘图专业版 - 商用授权',
    description: '提供商用授权的AI绘图服务，适合设计师和创意工作者',
    price: 799.0,
    originalPrice: 999.0,
    discount: 8.0,
    rating: 4.8,
    currentPrice:99.99,
    sales: 765,
    category: 'image',
    image:
      'https://readdy.ai/api/search-image?query=Professional%20design%20workspace%20with%20AI%20art%20generation%20tools%2C%20showing%20commercial%20quality%20artwork%20being%20created%2C%20design%20tablet%20and%20stylus%2C%20with%20a%20blue%20gradient%20background&width=400&height=300&seq=8&orientation=landscape',
  },
])
// 筛选和排序状态
const searchQuery = ref('')
const activeCategory = ref('all')
const showFilters = ref(false)
const priceRange = ref({ min: '', max: '' })
const ratingFilter = ref('')
const sortBy = ref('default')
// 购物车状态
const cart = ref([])
const getCartList=async()=>{
  const data=await getCartListService()
  console.log(data.cartList)
  data.cartList.forEach(item=>{
    const product=commoditys.value.find(item1=>item1.id===item.menu.id)
    if(product){
      cart.value.push({...product,quantity:item.count})
    }
  })
  console.log(cart.value)

}



const showCart = ref(false)
// 计算购物车总数量
const cartCount = computed(() => {
  return cart.value.reduce((total, item) => total + item.quantity, 0)
})
// 计算购物车总金额
const cartTotal = computed(() => {
  return cart.value.reduce((total, item) => total + item.currentPrice * item.quantity, 0)
})
// 筛选商品
const filteredProducts = computed(() => {
  let result = [...products.value]
  // 按分类筛选
  if (activeCategory.value !== 'all') {
    result = result.filter((product) => product.category === activeCategory.value)
  }
  // 按搜索关键词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(
      (product) =>
        product.name.toLowerCase().includes(query) ||
        product.description.toLowerCase().includes(query),
    )
  }
  // 按价格区间筛选
  if (priceRange.value.min !== '') {
    result = result.filter((product) => product.price >= Number(priceRange.value.min))
  }
  if (priceRange.value.max !== '') {
    result = result.filter((product) => product.price <= Number(priceRange.value.max))
  }
  // 按评分筛选
  if (ratingFilter.value) {
    result = result.filter((product) => product.rating >= Number(ratingFilter.value))
  }
  // 排序
  switch (sortBy.value) {
    case 'price-asc':
      result.sort((a, b) => a.price - b.price)
      break
    case 'price-desc':
      result.sort((a, b) => b.price - a.price)
      break
    case 'rating-desc':
      result.sort((a, b) => b.rating - a.rating)
      break
    case 'sales-desc':
      result.sort((a, b) => b.sales - a.sales)
      break
    case 'newest':
      // 这里假设id越大越新
      result.sort((a, b) => b.id - a.id)
      break
    default:
      // 默认排序，保持原顺序
      break
  }
  return result
})
// 重置筛选条件
const resetFilters = () => {
  searchQuery.value = ''
  priceRange.value = { min: '', max: '' }
  ratingFilter.value = ''
  sortBy.value = 'default'
}
// 应用筛选
const applyFilters = () => {
  showFilters.value = false
}
// 加载更多商品
const loadMore = () => {
  // 这里可以实现加载更多逻辑，例如分页加载
  // 为了演示，我们复制一些现有商品并修改ID
  const newProducts = products.value.slice(0, 4).map((product) => ({
    ...product,
    id: products.value.length + Math.floor(Math.random() * 1000),
  }))
  products.value = [...products.value, ...newProducts]
}

const postModifyCart =async (cart)=>{
    const res=await postModifyCartService(cart)
    console.log(res)
}

// 添加到购物车
const addToCart = (product: any) => {
  console.log(product)
  const existingItem = cart.value.find((item) => item.id === product.id)
  if (existingItem) {
    existingItem.quantity += 1
    postModifyCart({
      productId:existingItem.id,
      count:existingItem.quantity,
      status:3
    })
    console.log(existingItem)
  } else {
    cart.value.push({
      id: product.id,
      name: product.name,
      currentPrice: product.currentPrice,
      image: "https://images.unsplash.com/photo-1689443111130-6e9c7dfd8f9e?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTE4fHxjb21wdXRlciUyMHNjaWVuY2UlMjBhaXxlbnwwfHwwfHx8MA%3D%3D",
      quantity: 1,
    })

    postModifyCart({
      productId:product.id,
      count:1
    })
    console.log(cart)
  }
  // 显示添加成功提示
  // ElMessage({
  //   message: '已添加到购物车',
  //   type: 'success',
  //   duration: 2000,
  // })
}
// 从购物车移除
const removeFromCart = (index: number) => {
  const item=cart.value.splice(index, 1)[0]
  postModifyCart({
      productId:item.id,
      count:0,
      status:3
    })

}
// 增加商品数量
const increaseQuantity = (index: number) => {
  cart.value[index].quantity += 1
  postModifyCart({
      productId:cart.value[index].id,
      count:cart.value[index].quantity,
      status:3
    })
}
// 减少商品数量
const decreaseQuantity = (index: number) => {
  if (cart.value[index].quantity > 1) {
    cart.value[index].quantity -= 1
    postModifyCart({
      productId:cart.value[index].id,
      count:cart.value[index].quantity,
      status:3
    })
  } else {
    removeFromCart(index)
  }
}

const handleCheckout=()=>{
   cart.value=[]
   router.push('/pay')
}
onMounted(() => {
  // 这里可以添加初始化逻辑，例如从API获取商品数据
  getCommodityList().then(res => {
    console.log(res);
    commoditys.value = [...res]
    getCartList()
  })
 
})
</script>

<style scoped>
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
}


.popup {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all .3s; }
@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
  .popup {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.3); } }
.popup__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  background-color: #fff;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  display: table;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
  transition: all .5s .2s; }
.popup__left {
  width: 33.333333%;
  display: table-cell; }
.popup__right {
  width: 66.6666667%;
  display: table-cell;
  vertical-align: middle;
  padding: 3rem 5rem; }
.popup__img {
  display: block;
  width: 100%; }
.popup__text {
  font-size:1.2rem;
  margin-bottom: 4rem;
  -moz-column-count: 2;
  -moz-column-gap: 4rem;
  -moz-column-rule: 1px solid #eee;
  column-count: 2;
  column-gap: 4rem;
  column-rule: 1px solid #eee;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto; }
.popup:target {
  opacity: 1;
  visibility: visible; }
.popup:target .popup__content {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1); }
.popup__close:link, .popup__close:visited {
  color: #777;
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  font-size: 3rem;
  text-decoration: none;
  display: inline-block;
  transition: all .2s;
  line-height: 1; }
.popup__close:hover {
  color: #55c57a; }


.btn, .btn:link, .btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  display: inline-block;
  border-radius: 10rem;
  transition: all .2s;
  position: relative;
  font-size: 1.6rem;
  border: none;
  cursor: pointer; }

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0; }

.btn:active, .btn:focus {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }

.btn--white {
  background-color: #fff;
  color: #777; }
.btn--white::after {
  background-color: #fff; }

.btn--green {
  background-color: #55c57a;
  color: #fff; }
.btn--green::after {
  background-color: #55c57a; }

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s; }

.btn--animated {
  animation: moveInBottom .5s ease-out .75s;
  animation-fill-mode: backwards; }

.btn-text:link, .btn-text:visited {
  font-size: 1.6rem;
  color: #55c57a;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid #55c57a;
  padding: 3px;
  transition: all .2s; }

.btn-text:hover {
  background-color: #55c57a;
  color: #fff;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  transform: translateY(-2px); }

.btn-text:active {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transform: translateY(0); }

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important; }

.heading-secondary {
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  background-image: linear-gradient(to right, #7ed56f, #28b485);
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: .2rem;
  transition: all .2s; }
@media only screen and (max-width: 56.25em) {
  .heading-secondary {
    font-size: 3rem; } }
@media only screen and (max-width: 37.5em) {
  .heading-secondary {
    font-size: 2.5rem; } }
.heading-secondary:hover {
  transform: skewY(2deg) skewX(15deg) scale(1.1);
  text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2); }

.heading-tertiary {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase; }
</style>
